<template>
  <div id="SideContainer" v-show="show">
    <h3>数据列表</h3>
    <br />
    <SideNav />
  </div>
  <button id="SideButton" :style="{ left: show ? '12vw' : '0vw' }" @click="sideToggle">
    <img :src="show ? '/img/shouqicaidan.png' : '/img/zhankaicaidan.png'" style="width: 30px; height: 40px" alt="" />
  </button>
  <div id="main-vue">
    <main-view />
  </div>
</template>

<script lang="ts">
import SideNav from "@mars/pages/home/SideNav/SideNav.vue"
import MainView from "@mars/components/mars-work/main-view.vue"
import { sideNavController } from "@mars/store"
import { storeToRefs } from "pinia"

const sideNav = sideNavController()
const { show } = storeToRefs(sideNav)
const sideToggle = () => {
  sideNav.change()
}
export default {
  name: "Content",
  components: {
    SideNav,
    MainView
  },
  setup() {
    return { show, sideToggle }
  }
  // computed: {
  //   sideValue() {
  //     return show ? ;
  //   }
  // }
}
</script>

<style lang="less">
#SideContainer {
  height: 100vh;
  width: 12vw;
  background-color: white;
  padding: 10px 15px;
}

#SideButton {
  position: absolute;
  top: 50vh;
  z-index: 2;
}

#main-vue {
  flex: 1;
}

//侧边栏隐藏动画效果
</style>
